<template>
  <div>
    <el-form :inline="true" ref="form" :model="form" label-width="80px">
      <el-form-item label="字典名称">
      <el-select v-model="form.dictType" placeholder="字典名称">
        <el-option v-for="dictType of dictTypes" :label="dictType.dictName" :value="dictType.dictType"></el-option>
      </el-select>
      </el-form-item>
      <el-form-item label="字典标签">
        <el-input v-model="form.dictLabel"></el-input>
      </el-form-item>
      <el-form-item label="字典状态">
        <el-select v-model="form.status" placeholder="用户状态">
          <el-option label="正常" value="0"></el-option>
          <el-option label="停用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dictDataList(1)">查询</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
    <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%">
      <el-table-column
          type="selection" width="55">
      </el-table-column>
      <el-table-column
          label="字典编码"
          prop="dictCode"
          width="120">
      </el-table-column>
      <el-table-column
          prop="dictLabel"
          label="字典标签"
          width="120">
      </el-table-column>
      <el-table-column
          prop="dictValue"
          label="字典键值"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="dictSort"
          label="字典排序"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="状态"
          show-overflow-tooltip>
        <template scope="ss">
          <el-switch
              v-model="ss.row.status"
              active-value="0"
              inactive-value="1"
              @change="updateRoleStatus(ss.row.status,ss.row.roleId)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="创建时间"
          show-overflow-tooltip>
      </el-table-column>
      <el-table-column
          label="操作"
          show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[1, 2, 3, 4, 5,6]"
          :page-size=pageSize
          layout="total, sizes, prev, pager, next, jumper"
          :total=total>
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      pageNum:1,
      pageSize:3,
      total:0,
      form: {
        dictType:'',
        dictLabel: '',
        status: ''
      },
      tableData: [],
      dictTypes:[]
    }
  },
  methods:{
    dictDataList(num){
      const params= this.form;
      if (num===2){
        params.pageNum = this.pageNum;
        params.pageSize = this.pageSize;
      }else {
        params.pageNum = 1;
      }
      console.log(params);
      this.axios.get("http://localhost:6785/dict/data/select",{params}).then(res=>{
        console.log(res.data.list.list);
        this.tableData=res.data.list.list;
        this.total = res.data.list.total;
        this.pageNum=res.data.list.pageNum;
        this.pageSize=res.data.list.pageSize;
      })
    } , //每页多少条数据
    handleSizeChange(val) {
      this.pageSize=val;
      this.dictDataList(2);
    },
    //查询第几页数据
    handleCurrentChange(val) {
      this.pageNum = val;
      this.dictDataList(2);
    },
    dictTypeSelectAll(){
      this.axios.get("http://localhost:6785/dict/type/select/all").then(res=>{
        console.log(res.data.list);
        this.dictTypes=res.data.list;
      })
    }
  },
  created() {
    this.form.dictType= this.$route.query.dictType;
    this.dictDataList(1);
    this.dictTypeSelectAll();
  }
}
</script>
<style>

</style>